<template>
    <div>
        <button v-if="screenfull.isEnabled" @click="handleToggleExpand">全屏切换</button>
        <hr>
        <animated-number from="0" :to="toNum1" :key="toNum"></animated-number>
        <animated-number from="0" :to="toNum2" :key="toNum"></animated-number>
        <animated-number from="0" :to="toNum3" :key="toNum"></animated-number>
        <hr>
        <div>{{ t('ksdAdminManage') }}</div>
        <div>{{ t('loginButton') }}</div>
        <div>{{ useI18n().t('ksdAdminManage') }}</div>
        <div>{{ useI18n().t('loginButton') }}</div>
        <hr>
        <div>{{ useI18n().t('welcome') }}</div>
        <hr>
        <div>{{ useI18n().t('login.userName') }}</div>
        <div>{{ useI18n().t('login.pwd') }}</div>
        <hr>
        <button @click="handleChangeLang('zh-cn')">切换成中文</button> 
        <button @click="handleChangeLang('en')">切换成英文</button> 
    </div>
    
</template>
<script setup>
import { onMounted, ref } from 'vue'
import screenfull from 'screenfull'
import request from '@/request'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user.js'
const userStore = useUserStore()
const { locale, t } = useI18n()
const toNum1 = ref(4654)
const toNum2 = ref(1152)
const toNum3 = ref(5486) 

// 语言切换
const handleChangeLang = (lang)=>{
    locale.value = lang
    localStorage.setItem("ksd-kva-language",lang)
}


// 查询视频信息
const  handleLoadData = async () => {
    const resp = await  request.get("/video/get")
    console.log('resp', resp)
}

// 全屏切换
const handleToggleExpand = () => {
    screenfull.toggle();
}

onMounted(()=>{
    handleLoadData()
})
</script>